<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>首页</title>
    <link rel="stylesheet" href="css/jquery-ui.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/layui.css">

    <link rel="stylesheet" href="css/lc_switch.css">
    <link rel="stylesheet" href="css/evol-colorpicker.css">
    <link rel="stylesheet" href="css/ruler.css">
    <link rel="stylesheet" href="css/index.css">
    <style>

    </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin lyiS">
    <div class="layui-header">
        <div class="layui-logo"><img src="images/back.png" alt=""></div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item left1">
                <a href="javascript:;">
                    <img src="images/qipao.png" class="layui-nav-img">
                    <p>气泡图</p>
                </a>
            </li>
            <li class="layui-nav-item left2">
                <a href="javascript:;">
                    <img src="images/zhexian.png" class="layui-nav-img">
                    <p>折线图</p>
                </a>
            </li>
            <li class="layui-nav-item left3">
                <a href="javascript:;">
                    <img src="./images/zhu.png" class="layui-nav-img">
                    <p>柱状图</p>
                </a>
            </li>
            <li class="layui-nav-item left4">
                <a href="javascript:;">
                    <img src="./images/pie.png" class="layui-nav-img">
                    <p>饼图</p>
                </a>
            </li>
            <li class="layui-nav-item left5">
                <a href="javascript:;">
                    <img src="./images/shu.png" class="layui-nav-img shu">
                    <p>树状图</p>
                </a>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="./images/leida.png" class="layui-nav-img">
                    <p>雷达图</p>
                </a>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="./images/yibiao.png" class="layui-nav-img yib">
                    <p>仪表盘</p>
                </a>
            </li>
            <li class="layui-nav-item left6">
                <a href="javascript:;">
                    <img src="./images/map.png" class="layui-nav-img">
                    <p>地图</p>
                </a>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="./images/text.png" class="layui-nav-img">
                    <p>文字</p>
                </a>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="./images/fuzhu.png" class="layui-nav-img">
                    <p>辅助图</p>
                </a>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="images/help.png" class="layui-nav-img">
                    <p>帮助</p>
                </a>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="images/yichang.png" class="layui-nav-img">
                    <p>异常</p>
                </a>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="./images/save.png" class="layui-nav-img save">
                    <p>保存</p>
                </a>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="./images/fabu.png" class="layui-nav-img save">
                    <p>发布</p>
                </a>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="./images/yulan.png" class="layui-nav-img yulan">
                    <p>预览</p>
                </a>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black" id="div5">
        <div class="Child-top">
            <div class="ChildT-left" onclick="togge()"><img src="images/lianjie.png" alt=""></div>
            <div class="ChildT-top">图层</div>
            <div class="ChildT-right Child-right"><img src="images/de.png" alt=""></div>
        </div>

    </div>
    <div class="layui-side layui-bg-black" id="div4">
        <div class="Child-top">
            <div class="ChildT-left" onclick="togge()"><img src="images/lianjie.png" alt=""></div>
            <div class="ChildT-top">文件夹</div>
            <div class="ChildT-right"><i class="iconfont">&#xe602;</i></div>
        </div>
        <div class="SJT-ss qieh">
            <input type="text" class="suos" placeholder="在这里输入您想要搜索的内容">
            <i class="iconfont ic">&#xe618;</i>
        </div>
        <div class="LEFT"><img src="images/left.png" alt=""></div>
    </div>

    <div class="layui-body" >
        <div id="container">

        </div>
        <!-- 内容主体区域 -->
        <div class="LEFT">
            <img src="images/left.png" alt="" class="LEFT-img2">
            <img src="images/right.png" alt="" class="LEFT-img1">
        </div>
        <div class="RIGHT">
            <img src="images/left.png" alt="" class="RIGHT-img1">
            <img src="images/right.png" alt="" class="RIGHT-img2">
        </div>
    </div>
    <div class="layui-right layui-bg-black" id="div1">

        <div class="Child_top">
            <div class="ChildT-top">大屏设置</div>
            <div class="ChildT-bj ">
                <span>背景类型</span>
                <div class="layui-row layui-tab">
                    <ul class="layui-tab-title">
                        <li>
                            <label><input type="radio" name="color" value="0"><span>背景图</span> </label>
                        </li>
                        <li class="layui-this">
                            <label><input type="radio" name="color" checked="checked" value="1"><span>背景色</span> </label>
                        </li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item BJ show">
                            <div class="ChildT-pic">
                                <span>背景图片</span>
                                <div class="ChildTp-file">
                                    <input type="file" name="pclogo" id="xdaTanFileImg" onchange="xmTanUploadImg(this)" accept="image/*"/>
                                    <img src="images/pic.png" class="img-circle img-thumbnail img-responsive" id="avarimgs"/>
                                    <p>点击或拖拽文件至这里</p>
                                </div>
                            </div>
                        </div>
                        <div class="layui-tab-item BJ layui-show">
                            <div class="layui-fluid">
                                <div class="layui-row">
                                    <div class="layui-col-md4">背景颜色</div>
                                    <div class="layui-col-md3"><input id="mycolor" class="mycolor colorPicker evo-cp0" /></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


            </div>

        </div>
        <div class="Child_cont">
            <div class="ChildC_top">
                <span>缩放类型</span>
                <div class="ChildC-radio">
                    <label><input type="radio" name="pu"><span>等比缩放宽度铺满</span></label>
                    <label><input type="radio" name="pu"><span>等比缩放高度铺满</span></label>
                    <label><input type="radio" name="pu" checked="checked"><span>全屏铺满</span></label>
                    <label><input type="radio" name="pu"><span>原始像素</span></label>
                </div>
            </div>
            <div class="ChildC-px">
                <div class="ChildC-left">
                    <img src="images/help1.png" alt="">
                    <span>设置像素</span>
                </div>
                <div class="ChildC-right">
                    <div class="ChildCR-ko"><input type="text" class="Mwidth" onblur="Max(this)"></div>
                    <div class="ChlidCR-x">X</div>
                    <div class="ChildCR-ko"><input type="text" class="Mheight"  onblur="Max(this)"></div>
                </div>
            </div>

        </div>
        <div class="Child_co">
            <span>启动背景参考线</span>
            <input type="checkbox" name="check-1" value="4" class="lcs_check Line" autocomplete="off"/>
        </div>
        <div class="Child_gong">
            <p>功能按钮：</p>
            <img src="images/write.png" alt="">
        </div>
        <div class="ChildC-px Child_foot">
            <div class="ChildC-left">
                <img src="images/help1.png" alt="">
                <span>设置像素</span>
            </div>
            <div class="ChildC-right">
                <div class="ChildC-radio">
                    <label><input type="radio" name="zhi" checked="checked"><span>自动截图</span></label>
                    <label><input type="radio" name="zhi"><span>手动上传</span></label>
                </div>
            </div>
        </div>
        <div class="New">*大屏封面自动刷新</div>
    </div>
    <div class="layui-right layui-bg-black" id="div2">
        <div class="ChildT-top">大屏设置</div>
        <div class="layui-tab layui-tab-card Child2-tab">
            <ul class="layui-tab-title">
                <li class="layui-this">样式</li>
                <li>数据</li>

            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item  layui-show">
                    <div class="layui-collapse tab-item" lay-filter="test">

                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="layui-fluid">
                        <div class="layui-row">
                            <div class="layui-col-md4">选择数据源</div>
                            <div class="layui-col-md8">
                                <button>静态数据</button>
                                <button class="check">静态数据</button>
                                <p>编辑数据源</p>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="layui-right layui-bg-black" id="div3">
        <div class="ChildT-top">空页面</div>
        <div class="ChlidT-kon">请选择一个文件夹</div>
    </div>
    <div class="layui-footer">
        <!-- 底部固定区域 -->
        <input type="checkbox" name="check-1" value="4" class="lcs_check" autocomplete="off"/>
        <div class="Child-add">
            <img src="images/jian.png" alt="">
            <div id="slideTest1" class="demo-slider"></div>
            <img src="images/+.png" alt="">
        </div>
    </div>
</div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/layui.js"></script>
<script src="js/element.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/lc_switch.js"></script>
<script src="js/evol-colorpicker.js"></script>
<script src="js/jquery.zxxPageRuler.1.1.js"></script>
<script src="js/login.js"></script>
<script src="js/index.js"></script>
<script>

    // 大屏自适应
    (function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                // docEl.style.fontSize = 100 * (1280 / 3840) + 'px';
                docEl.style.fontSize = 100 * (clientWidth / 3200) + 'px';
            };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);

$(function () {
    $(".mycolor").colorpicker({
        // 隐藏旁边的色板
        hideButton: true,
        // 本地化调色板插件语言
        strings: "主题颜色,标准颜色,web颜色,主题颜色,返回调色板,历史记录, 没有历史记录.",
        // 允许选择透明颜色
        transparentColor: true
    });
    // 背景图片
    $('input[name="color"]').click(function (){
        var color = $("input[name='color']:checked").val();
        if(color==0){
            var img = document.getElementById("avarimgs");
            $('#container').css('background-image','url('+img.src+')');
        }else{
            $('#container').css('background-image','none');
            console.log('1',color)
        }

    })
})
    function xmTanUploadImg(obj) {
        var file = obj.files[0];
        console.log(file)
        var reader = new FileReader();
        reader.onload = function (e) {
            var img = document.getElementById("avarimgs");
            img.src = e.target.result;
            $('#container').css('background-image','url('+reader.result+')');
            $('#container').css('background-size','100% 100%')
        };
        reader.readAsDataURL(file);

    }
    layui.use('slider', function () {
        var slider = layui.slider;

        //渲染
        slider.render({
            elem: '#slideTest1',  //绑定元素
            value: 30, //初始值
            theme: '#88d5f2',//主题色
        });
    });

    $('.yulan').click(function () {
        var cont = $('#container').html();
        window.open("yulan.html");
        window.localStorage.setItem('cont', cont);
    })
</script>
</html>